<template>
    <div class="home">
        <van-sticky>
            <div class="nav" style="background-color: #fff;">
                <el-row type="flex" justify="end" style="height: 100%;align-items: center;">
                    <el-col :xs="0" :sm="24" :md="24" :offset="6">
                        <div class="list">
                            <div v-for="(item, index) in nav" 
                            v-show="!item.root || tokenInfo.root > 1"
                            :class="{ative : title == item.title}"
                            :key="index" @click="setPath(item)">{{ item.title }}</div>
                        </div>
                        <div class="userInfo" v-if="userInfo">欢迎回来！{{ userInfo.name }}</div>
                    </el-col>
                    <el-col :xs="5" :sm="0" :md="0">
                        <el-dropdown @command="setPath" trigger="click">
                            <el-button type="primary" plain>
                                {{ title }}
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item, index) in nav"
                                v-show="!item.root || tokenInfo.root > 1"
                                :command="item"
                                :key="index">{{ item.title }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </div>
        </van-sticky>
        <div class="content">
            <transition name="el-zoom-in-top">
                <router-view/>
            </transition>
        </div>
    </div>
</template>

<script>
    import { parseToken } from '@/api/other'
    import { Sticky } from 'vant'
    import { mapMutations } from 'vuex'
    export default {
        components : {
            [Sticky.name] : Sticky
        },
        name : 'home',
        data() {
            return {
                nav : [
                    {
                        title : '首页',
                        path : '/student/homePaper',
                    },
                    {
                        title : '题库',
                        path : '/student/homeTopic',
                    },
                    // {
                    //     title : '试卷',
                    //     path : '/student/homeTopic',
                    // },
                    // {
                    //     title : '排行',
                    //     path : '/student/homeTopic',
                    // },
                    {
                        title : '记录',
                        path : '/student/homeAnswer',
                    },
                    {
                        title : '退出登录',
                        path : '/login?type=Logout',
                    },
                    {
                        title : '控制台',
                        path : '/admin/home',
                        root : true
                    },
                ],
                // title : '首页',
                tokenInfo : sessionStorage.getItem('tokenInfo') ? JSON.parse(sessionStorage.getItem('tokenInfo')) : {},
                userInfo : {}
            }
        },
        computed : {
            title(){
                let title = undefined;
                this.nav.forEach(n => {
                    if (n.path == this.$route.path) {
                        title = n.title
                    }
                })
                return title
            }
        },
        created(){
            this.parseToken()
            this.$store.commit('getUserInfo', userInfo => this.userInfo = userInfo)
        },
        methods : {
            ...mapMutations(['setPath']),
            setPathBefore(item){
                if(item.title == this.title){
                    return
                }
                this.setPath(item.path)
            },
            parseToken(){
                if (sessionStorage.getItem('tokenInfo')) {
                    return
                }
                parseToken().then(res => {
                    if (res.code == 200) {
                        this.tokenInfo = res.data
                        sessionStorage.setItem('tokenInfo', JSON.stringify(res.data))
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.home{
    height: 100%;
    width: 100%;
    .nav{
        position: relative;
        width: 100%;
        height: 60px;
        color: lightseagreen;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        .list{
            display: flex;
            width: calc(100% - 200px);
            &>div{
                height: 100%;
                flex: 1;
                text-align: center;
                line-height: 60px;
                cursor: pointer;
                &.ative,
                &:hover{
                    border-bottom: 3px solid lightseagreen;
                }
                &.ative{
                    font-weight: 900;
                }
            }
        }
        
        .userInfo{
            position: absolute;
            right: 10px;
            top: 0;
            height: 100%;
            line-height: 60px;
        }
    }
    .content{
        width: 100%;
    }
}
</style>